<template>
	<view>
		<view class="head-view">
			<view class="content-view">
				<view class="content-title util-font-regular">
					<view class="content-title-value">我的业绩</view>
				</view>
				<view class="item-list">
					<view class="item util-font-regular">
						<view class="item-title">累计收益</view>
						<view class="item-number">
							<view class="item-number-unit">￥</view>
							<view class="item-number-value util-font-medium">{{parseInt(data.total_amount)/100.0}}</view>
						</view>
						<view class="item-change">
							<image class="item-change-image" src="../../static/workbench/up.png" mode="aspectFit"></image>
							<view class="item-change-value">今日+￥{{parseInt(data.today_account)/100.0}}</view>
						</view>
					</view>
					<view class="item util-font-regular">
						<view class="item-title">累计订单</view>
						<view class="item-number">
							<view class="item-number-value util-font-medium">{{parseInt(data.account_order_num)}}</view>
							<view class="item-number-unit">单</view>
						</view>
						<view class="item-change">
							<image class="item-change-image" src="../../static/workbench/up.png" mode="aspectFit"></image>
							<view class="item-change-value">今日+{{parseInt(data.today_account_order_num)}}单</view>
						</view>
					</view>
					<view class="item util-font-regular">
						<view class="item-title">团队收益</view>
						<view class="item-number">
							<view class="item-number-unit">￥</view>
							<view class="item-number-value util-font-medium">{{parseInt(data.account_team)/100.0}}</view>
						</view>
						<view class="item-change">
							<image class="item-change-image" src="../../static/workbench/up.png" mode="aspectFit"></image>
							<view class="item-change-value">今日+￥{{parseInt(data.today_account_team)/100.0}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="header-row-view" @click="commissionOrder">
				<view class="header-row-title util-font-medium">查看订单明细</view>
				<image class="header-row-image" src="../../static/workbench/arrow_right.png" mode="aspectFit"></image>
			</view> -->
		</view>
		<view class="line-view"></view>
		<view class="data-view">
			<view class="data-title-view util-font-regular">
				<view class="data-title">收益数据</view>
				<view class="data-subTitle">实时</view>
			</view>
			<view class="JSSegmentedControl util-font-regular">
				<view :class="[segmentedControlSelectedIndex == index?'JSSegmentedControlItem-select':'JSSegmentedControlItem']"
				 v-for="(item, index) in segmentedControlTitles" :key="index" @click="segmentControlDidSelected(index)">{{item}}</view>
			</view>
			<view class="total-data-view">
				<view class="total-data-item util-font-regular">
					<view class="total-data-item-title">累计成交</view>
					<view class="total-data-item-number">
						<view class="total-data-item-number-value util-font-medium">{{parseInt(contentData.allAccountOrderNum)}}</view>
						<view class="total-data-item-number-unit">单</view>
					</view>
				</view>
				<view class="total-data-line-view"></view>
				<view class="total-data-item util-font-regular">
					<view class="total-data-item-title">贡献收益</view>
					<view class="total-data-item-number">
						<view class="total-data-item-number-unit">￥</view>
						<view class="total-data-item-number-value util-font-medium">{{parseInt(contentData.allAccount)/100.}}</view>
					</view>
				</view>
			</view>
			<view class="qiun-columns">
				<view class="qiun-charts">
					<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
				</view>
			</view>
			<view class="table-view">
				<view class="table-header-view util-font-regular">
					<view class="table-header-item">收益来源</view>
					<view class="table-header-item">成交订单</view>
					<view class="table-header-item">贡献收益</view>
				</view>
				<view class="table-line-view"></view>
				<view class="table-body-view">
					<view class="table-body-row-view util-font-regular" v-for="(item, index) in chartData.series" :key="index">
						<view class="table-body-column-view">
							<view class="table-body-column-point" :style="{backgroundColor: chartData.colors[index]}"></view>
							<view class="table-body-column-text">{{item.name}}</view>
						</view>
						<view class="table-body-column-view">{{item.number}}单</view>
						<view class="table-body-column-view">￥{{parseInt(item.data)/100.}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="width: 100%;height: 40rpx;"></view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var that;
	var canvaRing = null;

	export default {
		data() {
			return {
				segmentedControlTitles: ["今日", "昨日", "近7日", "全部"],
				segmentedControlSelectedIndex: 0,

				data: {},
				timePeriods: 0,
				contentData: {},

				chartData: {
					colors: [
						'#1890ff',
						'#2fc25b',
						'#facc14',
						'#f04864',
						'#8543e0',
						'#90ed7d',
					]
				},

				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
			}
		},
		onLoad() {
			that = this

			this.cWidth = uni.upx2px(690);
			this.cHeight = uni.upx2px(250);

			this.loadData()
			this.loadContentData()
		},
		onPullDownRefresh() {
			this.loadData()
			this.loadContentData()
		},
		methods: {
			loadData: function() {
				var that = this
				that.sendRequest({
					url: 'app/appBrokerageRecords/statistics/' + uni.getStorageSync('userInfo').id,
					method: 'POST',
					header: that.$urlRequest.getHeader('token', 'json'),
					success: function(res) {
						that.data = res.data.data
					}
				})
			},
			loadContentData: function() {
				if (this.segmentedControlSelectedIndex == 0) {
					this.timePeriods = 0
				} else if (this.segmentedControlSelectedIndex == 1) {
					this.timePeriods = 1
				} else if (this.segmentedControlSelectedIndex == 2) {
					this.timePeriods = 7
				} else {
					this.timePeriods = -1
				}
				var that = this
				that.sendRequest({
					url: 'app/appBrokerageRecords/statisticsByTimePeriods/' + uni.getStorageSync('userInfo').id + '/' + that.timePeriods,
					method: 'POST',
					header: that.$urlRequest.getHeader('token'),
					success: function(res) {
						that.contentData = res.data.data

						var series = [{
							"name": "自购返佣",
							"data": that.contentData.selfAccount,
							"number": that.contentData.selfAccountOrderNum
						}, {
							"name": "粉丝贡献",
							"data": that.contentData.fansAccount,
							"number": that.contentData.fansAccountOrderNum
						}, {
							"name": "直属达人",
							"data": that.contentData.directAccount,
							"number": that.contentData.directAccountOrderNum
						}, {
							"name": "间接达人",
							"data": that.contentData.indirectAccount,
							"number": that.contentData.indirectAccountOrderNum
						}]

						// let Ring = {};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						that.chartData.series = series
						// Ring.series = series;
						that.showRing("canvasRing", that.chartData);
					}
				})
			},
			commissionOrder: function() {
				uni.navigateTo({
					url: 'commissionOrder'
				})
			},
			segmentControlDidSelected: function(index) {
				if (this.segmentedControlSelectedIndex != index) {
					this.segmentedControlSelectedIndex = index
					this.loadContentData()
				}
			},
			showRing(canvasId, chartData) {
				canvaRing = new uCharts({
					$this: that,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					colors: chartData.colors,
					extra: {
						pie: {
							offsetAngle: -90,
							ringWidth: 15 * that.pixelRatio,
							labelWidth: 15
						},
						tooltip: {
							xAxisLabel: false,
						}
					},
					legend: {
						show: false,
					},
					background: '#FFFFFF',
					pixelRatio: that.pixelRatio,
					series: chartData.series,
					animation: false,
					width: that.cWidth * that.pixelRatio,
					height: that.cHeight * that.pixelRatio,
					disablePieStroke: true,
					dataLabel: false,
					dataPointShape: false,
				});
			},
			touchRing(e) {
				canvaRing.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + parseInt(item.data)/100. + '元'
					}
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.head-view {}

	.content-view {
		width: 690rpx;
		margin: 30rpx 30rpx 0;
		padding-bottom: 30rpx;
		/* border-bottom: 2rpx solid #f1f1f1; */
	}

	.content-title {
		width: 100%;
		height: 70rpx;
	}

	.content-title-value {
		height: 70rpx;
		line-height: 70rpx;
		font-size: 38rpx;
		color: #333333;
		font-size: 34rpx;
		float: left;
	}

	.item-list {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.item {
		width: 165rpx;
		text-align: center;
	}

	.item-title {
		width: 100%;
		height: 42rpx;
		line-height: 42rpx;
		font-size: 26rpx;
		color: #666666;
	}

	.item-number {
		width: 100%;
		height: 43rpx;
		line-height: 43rpx;
		margin-top: 10rpx;
	}

	.item-number-unit {
		color: #333333;
		font-size: 24rpx;
		display: inline-block;
	}

	.item-number-value {
		color: #333333;
		font-size: 32rpx;
		display: inline-block;
	}

	.item-change {
		width: 100%;
		height: 35rpx;
		line-height: 35rpx;
		position: relative;
		/* top: -8rpx; */
		margin-bottom: 10rpx;
	}

	.item-change-image {
		width: 14rpx;
		height: 20rpx;
		position: relative;
		top: 5rpx;
	}

	.item-change-value {
		height: 35rpx;
		line-height: 35rpx;
		font-size: 20rpx;
		color: #d8622c;
		display: inline-block;
		margin-left: 5rpx;
	}

	.header-row-view {
		width: 690rpx;
		height: 100rpx;
		margin-left: 30rpx;
	}

	.header-row-title {
		color: #444444;
		font-size: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		float: left;
	}

	.header-row-image {
		width: 30rpx;
		height: 30rpx;
		float: right;
		margin-top: 35rpx;
	}

	.line-view {
		width: 100%;
		height: 20rpx;
		background-color: #f6f6f6;
	}

	.data-view {
		margin: 0rpx 30rpx 30rpx;
	}

	.data-title-view {
		height: 124rpx;
	}

	.data-title {
		height: 124rpx;
		line-height: 124rpx;
		font-size: 38rpx;
		color: #333333;
		font-size: 34rpx;
		float: left;
	}

	.data-subTitle {
		height: 124rpx;
		line-height: 124rpx;
		font-size: 24rpx;
		color: #999999;
		float: right;
	}

	.JSSegmentedControl {
		width: 670rpx;
		height: 64rpx;
		padding: 4rpx;
		background-color: #ededed;
		border-radius: 36rpx;
		display: flex;
		justify-content: space-around;
	}

	.JSSegmentedControlItem-select {
		width: 167rpx;
		height: 64rpx;
		float: left;
		line-height: 64rpx;
		text-align: center;
		font-size: 28rpx;
		background-color: white;
		border-radius: 32rpx;
		color: #333333;
	}

	.JSSegmentedControlItem {
		width: 167rpx;
		height: 64rpx;
		float: left;
		line-height: 64rpx;
		text-align: center;
		font-size: 28rpx;
		border-radius: 32rpx;
		color: #999999;
	}

	.total-data-view {
		width: 690rpx;
		height: 80rpx;
		margin-top: 50rpx;
	}

	.total-data-item {
		width: 344rpx;
		height: 80rpx;
		text-align: center;
		float: left;
	}

	.total-data-item-title {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 26rpx;
		color: #999999;
	}

	.total-data-item-number {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
	}

	.total-data-item-number-unit {
		color: #333333;
		font-size: 24rpx;
		display: inline-block;
	}

	.total-data-item-number-value {
		color: #333333;
		font-size: 32rpx;
		display: inline-block;
	}

	.total-data-line-view {
		width: 2rpx;
		height: 50rpx;
		margin-top: 20rpx;
		float: left;
		background-color: #ededed;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
		padding-top: 30rpx;
	}

	.qiun-charts {
		width: 100%;
		height: 250rpx;
	}

	.charts {
		width: 100%;
		height: 250rpx;
	}

	.table-view {
		width: 670rpx;
		padding: 0 10rpx;
	}

	.table-header-view {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		color: #999999;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
	}

	.table-header-item {
		width: 175rpx;
		text-align: center;
	}

	.table-line-view {
		width: 100%;
		height: 2rpx;
		background-color: #f1f1f1;
		margin: 10rpx 0;
	}

	.table-body-view {}

	.table-body-row-view {
		width: 100%;
		height: 64rpx;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		color: #333333;
	}

	.table-body-column-view {
		width: 175rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
	}

	.table-body-column-point {
		width: 16rpx;
		height: 16rpx;
		display: inline-block;
		background-color: red;
		border-radius: 8rpx;
		margin-right: 10rpx;
	}

	.table-body-column-text {
		display: inline-block;
	}
</style>
